<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/react.development.js"></script>
    <script src="../lib/react-dom.development.js"></script>
    <script src="../lib/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
    const root = ReactDOM.createRoot(document.querySelector('#root'));
    const arr1 = [1, 2, 3, 4];
    const arr2 = arr1.map(item => (<li>{item}</li>));
    let users = [
        {
            id: 1,
            name: '前端小王子',
            age: 19
        },
        {
            id: 2,
            name: 'React大魔王',
            age: 20
        },
        {
            id: 3,
            name: 'Vue大魔王',
            age: 20
        }
    ]
    root.render(
        (
            <div>
                <h3>行内样式处理</h3>
                <div style={{color: 'red', border: '1px solid blue', backgroundColor: 'pink'}}>红色文字 蓝色边框 粉丝背景</div>
                <hr/>
                <p>{arr1}</p>
                <hr/>
                <ul>{arr2}</ul>
                <hr/>
                <ul>
                    {arr1.map(item => (<li>{item}</li>))}
                </ul>
                <ul>
                    {users.map(user => (
                       <li>
                           <h3>姓名: {user.name}</h3>
                           <p style={{color:'red'}}>年龄: {user.age}</p>
                       </li>
                    )) }
                </ul>
            </div>
        )
    );
</script>
</body>
</html>